<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: caixianfeng
 * @Date: 2021-07-13 11:09:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 16:58:35
-->
<template>
  <div>
    <!-- 头部 -->
    <Head />
    <HeadImg />
    <!-- /头部 -->
    <!-- 列表 -->
    <articleHead>
      <span slot="text"> </span>
    </articleHead>
    <div class="content">
      <div class="articles">
        <ul>
          <li
            v-for="item in articleData.list"
            @click="toArticle(item.id, item.category.name)"
            :key="item.id"
          >
            {{ item.title }}
            <p>[{{ item.publishTime | fmtDate }}]</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- /列表 -->
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChangeHandler"
        :current-page="articleData.page"
        :page-size="articleData.pageSize"
        :total="articleData.total"
      >
      </el-pagination>
    </div>
    <!-- /分页 -->
    <Footer />
  </div>
</template>

<script>
import { get } from "../utils/request";
import Head from "./components/Head";
import HeadImg from "./components/Head_img.vue";
import ArticleHead from "./components/articleHead";
import Footer from "./components/Footer";
export default {
  watch: {
    "$route.query": {
      handler(query) {
        this.param.categoryId = query.categoryId;
        this.name = query.name;
        this.loadArticles();
      },
      deep: true,
    },
  },
  components: { Head, HeadImg, ArticleHead, Footer },
  data() {
    return {
      articleData: {},
      param: {
        page: 1,
        pageSize: 10,
      },
      name: "",
    };
  },
  methods: {
    //跳转到文章详情
    toArticle(id, name) {
      this.$router.push({
        path: "/article",
        query: { id, name },
      });
    },

    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles() {
      let url = "/index/article/pageQuery";
      get(url, this.param).then((resp) => {
        this.articleData = resp.data;
      });
    },
  },
  created() {
    let categoryId = this.$route.query.categoryId;
    this.param.categoryId = categoryId;
    this.name = this.$route.query.name;
    this.loadArticles();
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  margin: 20px 0 0 0;
  color: #333;
}
.content li {
  width: 75%;
  height: 36px;
  line-height: 36px;
  margin: 0 auto;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  list-style: inside;
}
.content li:hover {
  cursor: pointer;
  text-indent: 1em;
  transition-duration: 0.3s;
}
.content p {
  float: right;
}
.paging {
  text-align: center;
  font-size: 12px;
  margin: 8px 0;
}
</style>